<!--template放HTML script放JS style放CSS-->
<!--注意：script标签上必须有setup属性-->
<template>
  <h1>文本指令</h1>
  <h1>我们的第一个Vue组件Component</h1>
  <p>{{info}}</p>
  <button @click="f">点我</button>
  <p>{{num}}</p>
  <button @click="numup">点我num++</button>
  <hr>
  <p>{{a}}</p>
  <p v-text="a"></p>
  <p v-html="a"></p>





</template>
<script setup>
import {ref} from "vue";
// 定义一个响应式数据
const info = ref('我是AView组件中的数据')
//定义箭头函数
const f = ()=>{
  console.log(info.value)
  info.value = '我是AView组件中的数据2'
}
const num = ref(0)
const numup = ()=>{
  num.value++
}
const a = ref('今天是星期一，晚上有<mark>月考</mark>');




</script>
<style scoped>

</style>